import React, { useRef, useState ,useEffect} from 'react';
import { Descriptions, Card,Button } from 'antd';
import { useLocation ,useNavigate} from 'react-router-dom';
import { userpagedetail } from '@/services/system/user';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
  },
  card: {
    borderRadius: '8px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
  },
  form: {
    maxWidth: '800px',
    margin: '0 auto',
  },
  formItem: {
    marginBottom: '24px',
    '& .ant-form-item-label': {
      fontWeight: 500,
    },
  },
  input: {
    height: '40px',
    borderRadius: '6px',
  },
  datePicker: {
    width: '100%',
    height: '40px',
    borderRadius: '6px',
  },
  radioGroup: {
    display: 'flex',
    gap: '32px',
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '16px',
    marginTop: '40px',
  },
  submitButton: {
    width: '120px',
    height: '40px',
    borderRadius: '6px',
  },
  cancelButton: {
    width: '120px',
    height: '40px',
    borderRadius: '6px',
  },
}));

const UserManageView: React.FC = () => {
  const { styles } = useStyles();
  const location = useLocation();
  const [Userrecords, setUserrecords] = useState<any[]>([]);
  const record = location.state?.record || {};
  const userData = record;
  const navigate = useNavigate();
  console.log('location', location);
  useEffect(() => {
    if (userData) {
      fetchData();
    }
  }, [userData]);

  const fetchData = async (params = {id: userData.id}) => {
    try {
      const response = await userpagedetail({
        ...params
      });
      console.log('Response:', response); // 打印响应
      if (response.code === 200) {
        setUserrecords(response.data.records);
      } else {
        console.error('Failed to fetch user data:', response);
      }
    } catch (error) {
      console.error('Error fetching user data:', error);
    }
  };
  const handleBack = () => {
    navigate('/system/usermanage');
  };
  return (
    <Card>
      <Descriptions title="用户详情" bordered>
        <Descriptions.Item label="用户名">{userData?.userName}</Descriptions.Item>
        <Descriptions.Item label="姓名">{userData?.name}</Descriptions.Item>
        <Descriptions.Item label="部门">{userData?.department}</Descriptions.Item>
        {/* <Descriptions.Item label="角色">{userData?.role}</Descriptions.Item> */}
        <Descriptions.Item label="状态">
          {userData?.status === 1 ? '启用' : '禁用'}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">{userData?.createTime}</Descriptions.Item>
      </Descriptions>
      <div className={styles.buttonWrapper}>
            <Button type="primary" onClick={handleBack}>
              返回
            </Button>
          </div>
    </Card>
  );
};

export default UserManageView;
